<template>
  <section id="userinfo">
    <header>
        <div id="imgwidth">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for='(val,index) in imgArr' :key='index'>
                      <img :src="val"  width="100%" style="max-height:180px;">
                  </div>
              </div>
              <div class="swiper-scrollbar" style='height:2px;'></div>
          </div>
        </div>
    </header>
    <div class="middle">
        <div class='info'>  
            <h1>{{sellerData.fullName}} </h1>
            <p style='padding-top:10px;'>电话：{{sellerData.merchantPhone}}</p>
            <p style='padding:10px 0 20px 0'>地址：{{sellerData.address}}</p>
        </div>
        <div style="border-top:1px solid #f1f0f0;" @click="message">
            <el-row style="height:50px;line-height:50px;">
                <el-col :span="3" style="color:cornflowerblue;">
                    <i class="el-icon-edit-outline"></i>
                </el-col>
                <el-col :span="16">
                    留言反馈 
                </el-col>
                <el-col :span="5" style="text-align:right;">
                    <i class="el-icon-arrow-right"></i>
                </el-col>
            </el-row>

        </div>
        <div style="border-top:1px solid #f1f0f0;" @click="openSellerList" v-if='sellerList.length!=0'>
            <el-row style="height:50px;line-height:50px;">
                <el-col :span="3" style="color:cornflowerblue;">
                    <i class="el-icon-tickets"></i>
                </el-col>
                <el-col :span="16">
                    选择商户 
                </el-col>
                <el-col :span="5" style="text-align:right;">
                    <i class="el-icon-arrow-right animation"></i>
                </el-col>
            </el-row>
            <div class='seller-list'>
              <p v-for='(val,index) in sellerList' :key='index' @click.stop='goSeller(val)'>{{val.fullName}}</p>
            </div>
        </div>
    </div> 
    <div class="footernav">
     <el-row>
         <el-col style='border-right:1px solid #e2dfdf' :span="6">
           <div @click="footerEv('index',$event)">
             <span class="fa fa-home"></span> 
             首页
           </div> 
        </el-col>
        <el-col style='border-right:1px solid #e2dfdf' :span="6">
           <div @click="footerEv('order',$event)" class='active'>
             <span class='fa fa-list-alt'></span>
             订单
           </div>
        </el-col>
        <el-col style='border-right:1px solid #e2dfdf' :span="6">
           <div @click="footerEv('oil',$event)">
             <span class='fa fa-bar-chart'></span>
             油卡
           </div>
        </el-col>
        <el-col :span="6">
           <div @click="footerEv('seller',$event)" style='color:red'>
             <span class='fa fa-user-o'></span>
             商户
           </div>
        </el-col>
      </el-row>
    </div>
  </section>
</template>
<script>
  import {URL_SELLER_INFO,AJAX,HREF,URL_CHANGESELLER,URL_GOSELLER,_layer} from '@/comm.js';
  export default {
    data(){
      return ({
        sellerData:{},
        imgArr:[],
        sellerList:[],
        offOpen:false,
      });
    },
    created(){
      let This=this;
      $.get(URL_SELLER_INFO,function(data){
        if(data.retult){
          This.imgArr=JSON.parse(data.data.storefrontImgJson);
          This.sellerData=data.data;
        }else{
          _layer('服务器开小差咯');
        }
      });
      //拉取更多商户
      this.changeSeller();
    },
    mounted(){
      setTimeout(function(){
        new Swiper ('.swiper-container', {
            autoplay : {
              delay:3000,
              disableOnInteraction: false,
            },
            scrollbar: {
               el: '.swiper-scrollbar',
            },
        }); 
        $('.swiper-scrollbar .swiper-scrollbar-drag').css('background','rgba(0,0,0,0.3)');
      },500);
    },
    methods:{
      footerEv(type,ev){
       $('.active-wrap .active').removeClass('active');
       $(ev.target).addClass('active');
       switch(type){
         case 'index':
           window.location.href=HREF+'/mdlist.html';
           console.log('跳转到商城页面');
           break ;
         case 'order':
           window.location.href=HREF+'/seller-order.html';
           console.log('跳转到商户订单页面');
           break ;
         case 'oil':
           window.location.href=HREF+'/seller-show-oilList.html';
           console.log('跳转到商户油卡页面');
           break ;
         case 'seller': 
           window.location.href=HREF+'/seller-info.html';
           console.log('跳转到商户页面');
           break ;
       }
     },
     message(){
        window.location.href=HREF+'/leaving-message.html';
     },
     changeSeller(){
        let This=this;
        $.get(URL_CHANGESELLER,function(data){
          if(data.retult){
            This.sellerList=data.data;
          }
        });
    },
    //折叠选择更多商户
    openSellerList(){
      if(this.offOpen=!this.offOpen){
        $('.seller-list').slideDown(200);
        $('.animation').css('transform','rotateZ(90deg)');
      }else{
        $('.seller-list').slideUp(200);
        $('.animation').css('transform','rotateZ(0deg)'); 
      }
    },
    goSeller(seller){
      let This=this;
      $.ajax({
        url:URL_GOSELLER+seller.id,
        type:'get',
        async:true,
        xhrFields:{
          withCredentials:true
        },
        success:function(data){
          if(data.retult){
            $.ajax({
              url:URL_SELLER_INFO,
              type:'get',
              async:true,
              xhrFields:{
                withCredentials:true
              },
              success:function(data1){
                if(data1.retult){
                  This.imgArr=JSON.parse(data1.data.storefrontImgJson);
                  This.sellerData=data1.data;
                }else{
                  _layer('服务器开小差咯');
                }
              }
            });
          }
        }
      });
      // $.get(URL_GOSELLER+seller.id,function(data){

      //   if(data.retult){
      //     console.log('选择请求')
      //     console.log(URL_GOSELLER+seller.id)
      //     $.get('http://192.168.0.191:8080/wx/merchants/showInfo',function(data){
      //       console.log('showInffdgfdgsdfgsdfgsdfgsdfo请求')
      //       console.log(data);
      //       // This.imgArr=JSON.parse(data.data.data.storefrontImgJson);
      //       // This.sellerData=data.data.data;
      //     });
      //   }
      // });
    }
    }
  }
</script>
<style> 
     #userinfo header {
          width: 100%;
          height: auto;
          height: 200px;
          overflow: hidden;
          position: relative;
      }
      #userinfo header>div {
          width: 100%;
      }

      #userinfo header img {
          height: 200px;
          border: 0px;
          width: 100%;
      }

      #userinfo .middle {
          width: 100%;
          padding-bottom: 20px;
      }

      #userinfo .middle>div {
          background-color: white;
          padding: 0px 15px 0px 15px;
      }

      #userinfo .middle i {
          font-size: 18px;
      }
      .info h1{
          padding:15px 0 20px 0;
          font-size:16px;
          font-weight: 600;
          letter-spacing: 1px;
      }
      .info h1 span{
        display: inline-block;
        margin-left: 6px;
        padding:3px 4px;
        font-size: 12px;
        color:white;
        background: #eba43f;
        box-shadow: 0 0 3px #ccc955;
      }
      .footernav{
          height:35px;
          line-height: 35px; 
      }
      .seller-list{
        display: none;
      }
      .seller-list p{
          padding:13px;
          border-bottom:1px solid #f7f7f7;
          text-align: center;
      }
      .seller-list p:first-of-type{
          padding-top: 2px;
      }
      .seller-list p:last-of-type{
          border-bottom: none;
      }
      .animation{
        transition: 0.2s;
      }
</style>

